<!DOCTYPE html>
<html>
	<head>
		<title>个人中心</title>
		<meta name="description" content="个人中心"/>
        <meta name="keywords" content="个人中心"/>
        <meta charset="utf-8">
        <meta name="robots" content="all" />
        <meta name="author" content="biaofan.com.cn" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
		<link href="css/am.css" rel="stylesheet"/>
		<link href="css/iconfont.css" rel="stylesheet"/>
		<link href="css/style.css" rel="stylesheet"/>
        <link rel="stylesheet" href="css/flexslider.css">
		<script src="js/jquery.js"></script>
        <script src="js/jquery.flexslider.js"></script>
	</head>
	<body>
    
    <div class="webpage">
        <div class="personalCenterView">
            <div class="_top clear">
                <div class="avatar fl wow fadeInUp" style="background: url(images/touxiang.png) center center no-repeat;background-size: cover;width: 60px;height: 60px;"></div>
                <div class="text fl wow fadeInUp">
                    <h3 class="title">中健健身官方网站</h3>
                    <p class="subtitle">域名：www.zhongjianyinzuo.com</p>
                </div>
            </div>
            <div class="_bottom">
                <ul class="tubiao">
                    <li class="websiteStatus item wow">
                        <div class="top clear">
                            <p class="text fl">
                                网站状态
                            </p>
                            <div class="_other fr">
                                百度排行<span class="c-red">1</span><i class="sprite"></i>
                            </div>
                        </div>
                        <div class="bottom">
                            <ol class="clear">
                                <li class="fl">
                                    <div class="tips">
                                        <i class="sprite sprite0"></i>
                                        <p>上线时间</p>
                                    </div>
                                    <p>2018-09-10</p>
                                </li>
                                <li class="fl">
                                    <div class="tips">
                                        <i class="sprite sprite1"></i>
                                        <p>服务器剩余时长</p>
                                    </div>
                                    <p>1年212天12时</p>
                                </li>
                                <li class="fl">
                                    <div class="tips">
                                        <i class="sprite sprite2"></i>
                                        <p>总访问量</p>
                                    </div>
                                    <p>28821</p>
                                </li>
                                <li class="fl">
                                    <a href="inquiryInformation.html">
                                        <div class="tips">
                                            <i class="sprite sprite3"></i>
                                            <p>询盘信息</p>
                                            <i class="iconfont icon-tubiao-"></i>
                                        </div>
                                        <p>1764<span>·</span> </p>
                                    </a>
                                </li>
                            </ol>
                        </div>
                    </li>
                    <li class="trafficAnalysis item wow">
                        <div class="top clear">
                            <p class="text fl">流量分析</p>
                            <div class="_other fr">
                                <span class="link"></span>
                                活动次数
                            </div>
                        </div>
                        <div class="bottom">
                            <div id="chart1" style="height: 220px;"></div>
                        </div>
                    </li>
                    <li class="accessAnalysis item wow">
                        <div class="top clear">
                            <p class="text fl">访问分析</p>
                        </div>
                        <div class="bottom">
                            <div id="chart2" style="height: 220px;"></div>
                        </div>
                    </li>
                    <li class="areaArrangement item wow">
                        <div class="top clear">
                            <p class="text fl">地区分布</p>
                        </div>
                        <div class="bottom">
                            <div id="chart3" style="height: 220px;"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom-navigation">
            <ul class="clear navigatio">
                <li class="fl">
                    <a href="index.html">
                        <i class="iconfont icon-home"></i>
                        <p>首页</p>
                    </a>
                </li>
                <li class="fl">
                    <a href="news.html">
                        <i class="iconfont icon-barrage"></i>
                        <p>资讯</p>
                    </a>
                </li>
                <li class="fl active">
                    <a href="personalCenter-Normal.html">
                        <i class="iconfont icon-my-full"></i>
                        <p>个人中心</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <script src="js/base.js"></script>
    <script src="js/wow.min.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart1 = echarts.init(document.getElementById('chart1'));

        var option = {
            grid: {
                y: 30,
                x: 40,
                width: '82%',
                height: '74%'
            },
            color:['#188df0'],
            xAxis : [
                {
                    type : 'category',
                    data :['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                    axisLabel : {
                        show:true,
                        textStyle: {
                            color: '#999'
                        }
                    },
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        show:true,
                        textStyle: {
                            color: '#999'
                        }
                    },
                }
            ],
            series : [
                {
                    name:'活动次数',
                    type:'bar',
                    data:[500, 1000, 30, 70, 25.6, 1700, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                   
                }
            ]
        };
        
      

        // 为echarts对象加载数据 
        myChart1.setOption(option); 
       

        // 一个页面多个图表的自适应解决方法
        window.addEventListener("resize", function () {
            myChart1.resize();
        });
    </script>
    <script type="text/javascript">
        var myChart2 = echarts.init(document.getElementById('chart2'));
        var option = {
            grid: {
                x: 40,
                y: 54,
                width: '82%',
                height: '60%'
            },
            legend: {
                data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['周一','周二','周三','周四','周五','周六','周日'],
                    axisLabel : {
                        show:true,
                        textStyle: {
                            color: '#999'
                        }
                    },
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        show:true,
                        textStyle: {
                            color: '#999'
                        }
                    },
                }
            ],
            series : [
                {
                    name:'邮件营销',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'直接访问',
                    type:'line',
                    stack: '总量',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    stack: '总量',
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        
        myChart2.setOption(option); 

        window.addEventListener("resize", function () {
            myChart2.resize();
        });
    </script>
    <script type="text/javascript">
        var myChart3 = echarts.init(document.getElementById('chart3'));
        var option = {
            legend: {
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };
                
        myChart3.setOption(option); 

        window.addEventListener("resize", function () {
            myChart3.resize();
        });
    </script>
    <script>
        var time;
        var thisObj = $('ul.tubiao');
        time = setTimeout(function(){
            thisObj.find("li.item").each(function(i){
                var tA = $(this);
                setTimeout(function(){
                    tA.addClass('fadeInUp',300).fadeIn('fast');
                },150*i);
            });
        },200);
    </script>
	</body>
</html>
